<template>
	<view class="wp">
		<view class="tab">
			<view :class="hov[index]" v-for="(item,index) in tab" :key="index" @click="sho(index)">
				{{item}}
				<text class="lin" :style="bol[index]"></text>
			</view>
		</view>
		<view class="cont"  v-for="(item,index) in coupons" :key="index">
			<view class="pre">
				<view class="lef">
					<view class="amo">
						￥<text>{{item.amo}}</text>
					</view>
					<view class="redu">
						满<text>{{item.max}}</text>减{{item.amo}}
					</view>
					<view class="dat">
						{{item.dat}}
					</view>
				</view>
				<view class="rig" @click="shiYong(sy)">
					{{item.use}}
				</view>
			</view>
			<view class="bott">
				<view class="bott-lef1" v-if="!bobol[index]">
					<image :src="src[0]"></image>微信支付
				</view>
				<view class="bott-lef1" v-if="bobol[index]">
					可用商品
				</view>
				<view class="bott-right" @click="xDet(index)">
					详细说明<image :src="jtou[index]" mode=""></image>
				</view>
				<view class="intr" v-if="bobol[index]">
				 <text></text>{{intr}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import url from '../../components/hosturl.js';
	export default {
		data() {
			return {
				sy:1,
				tab:['待使用','已使用','已过期'],
				bol:[],
				hov:['tab-hov'],
				amo:'50',
				redu:[],
				guse:[],
				over:[],
				redu:[{amo:'50',max:'99',dat:'2020.04.27-2020.05.31',use:'去使用'},{amo:'50',max:'99',dat:'2020.04.27-2020.05.31',use:'去使用'}],
				use:[{amo:'60',max:'99',dat:'2020.04.27-2020.05.31',use:'已使用'},{amo:'50',max:'99',dat:'2020.04.27-2020.05.31',use:'已使用'}],
				over:[{amo:'70',max:'99',dat:'2020.04.27-2020.05.31',use:'已过期'},{amo:'50',max:'99',dat:'2020.04.27-2020.05.31',use:'已过期'}],
				coupons:[],
				src:['/static/wx.png','/static/jtoouxia.png','/static/jtous.png'],
				jtou:[],
				bobol:[],
				intr:'全部商品可用'
			}
		},
		methods:{
			sho(e){
				if(e==0){
					this.coupons=this.redu;
					this.sy=1;
				}
				if(e==1){
					this.coupons=this.guse;
					this.sy=2;
				}
				if(e==2){
					this.coupons=this.over;
					this.sy=2;
				}
				for(var i=0;i<this.tab.length;i++){
					Vue.set(this.bol,i,'background-color:#fff;');
					Vue.set(this.hov,i,'');
					i==e&&Vue.set(this.bol,i,'background-color:#a286eb;')&&Vue.set(this.hov,i,'tab-hov');
				}
			},
			shiYong(e){
				if(e==1){
					console.log(e)
					uni.switchTab({
						url:'/pages/classify/category'
					})
				}
			},
			xDet(e){
				Vue.set(this.bobol,e,!this.bobol[e]);
				if(this.bobol[e]){
					this.jtou[e]=this.src[2];
				}else{
					this.jtou[e]=this.src[1];
				}
				
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'我的优惠卷'
			});
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#a286eb'
			});
			this.bol.push('background-color:#a286eb;');
			this.coupons=this.redu;
			for(let i in this.coupons){
				this.bobol.push(false);
				this.jtou.push(this.src[1]);
			}
			var _this=this;
			uni.request({
				url:url+'/Me/getAccessCoupon',
				method:'GET',
				data:{
					'token':uni.getStorageSync('token'),
				},
				success(res) {
					var a=res.data.msg;
					var time=Date.parse(new Date())/1000;
					for(let i in a){
						a[i].sub_price=a[i].sub_price==undefined?a[i].discount:a[i].sub_price;
						if(time<a[i].end_time){
							var obj={amo:a[i].sub_price,redu:a[i].rule,dat: times(a[i].begin_time)+'—'+times(a[i].end_time),use:'去使用'}
							_this.redu.push(obj);
						}else{
							var obj={amo:a[i].sub_price,redu:a[i].rule,dat: times(a[i].begin_time)+'—'+times(a[i].end_time),use:'已过期'}
							_this.over.push(obj);
							
						}
					}
				}
			})
		}
	}
</script>

<style>
page{ background-color: #f8f8f8;color: #303133;font-size: 28rpx;height: 100%; }
.tab{ background-color: #fff;border-bottom: 1rpx #D6D6D6 solid;display: flex;justify-content: center;align-items: center;line-height: 100rpx; }
.tab-hov{ color: #a286eb; }
.tab .lin{ background-color: #fff;display: block;height: 5rpx;width: 30rpx;margin: 0 auto; }
.tab view{ flex: 1;text-align: center; }
.cont{ background-color: #fff;margin: 20rpx; }
.pre{ color: #fff;display: flex;align-items: center;justify-content: center;background-color: #a387eb; }
.lef{ border-right: 1px #D6D6D6 dotted; width: 70%;}
.amo{ font-size: 38rpx;line-height: 60rpx;padding: 20rpx 20rpx 0; }
.redu{ font-size: 26rpx;padding: 0 20rpx 10rpx; }
.dat{ font-size: 20rpx;padding: 0 20rpx 30rpx;}
.rig{ width: 30%;font-size: 28rpx;text-align: center;height: 145rpx;line-height: 145rpx; }
.bott{ color: #606266;display: flex;justify-content: center;align-items: center;flex-wrap: wrap; padding: 20rpx 30rpx; }
.bott-lef1,.bott-right{ width: 50%;font-size: 28rpx; }
.bott-lef1 image{ height: 35rpx;width: 40rpx;margin-right: 10rpx; vertical-align: middle; }
.bott-right{ text-align: right; }
.bott-right image{ height: 20rpx;width: 30rpx;margin-left: 10rpx;}
.intr{ color: #555555;font-size: 28rpx;padding: 20rpx;line-height: 30rpx;text-align: left;width: 100%; }
.intr text{ background-color: #555555;display: inline-block;height: 5rpx;margin-right: 10rpx; width: 5rpx;vertical-align: middle;}
</style>
